<body>
	<script type="text/javascript" src="<?php echo base_url('skin/js/userprofile.js'); ?>"></script>
    <div id="phoneGallery" >
    
    <div class="galleryRight"></div>
    	
    	<div class="wizard">
            <a href="<?php  echo site_url('gallery'); ?>" class="current done">
            <span class="wiz1"></span>
                 <p>Pick a gadget</p>
            </a>
            <a href="<?php  echo site_url('promo'); ?>" class="current done">
             <span class="wiz2"></span>
                 <p>Choose your promo</p>
            </a>
            <a href="<?php  echo site_url('prepaid'); ?>" class="current done">
             <span class="wiz3"></span>
                 <p class="abs">Enter your <br>mobile number</p>
            </a>
            <a href="<?php  echo site_url('userprofile'); ?>" class="current">
             <span class="wiz4"></span>
                 <p>Complete your profile</p>
            </a>
            <a href="<?php  echo site_url('globestore'); ?>" class="width100">
             <span class="wiz5"></span>
                 <p class="absd">Select your <br>preferred Globe Store <br>branch for handset <br>pickup</p>
            </a>
        </div>
    
    
    <div class="mobileHeader">
            <h5 class="hidden textBlue">Select your device</h5>
            <h5 class="hidden textBlue">Choose your promo</h5>
            <h5 class="hidden textBlue">Input your mobile number</h5>
            <h5 class="textBlue">Complete your profile</h5>
            <h5 class="hidden textBlue">Select your preferred Globe Store branch for handset pickup</h5>
        </div>
    
    <div class="clear"></div>
    
    
    <div class="width960c">
    
    	<div class="deviceInfosIns marg40 floatLeft">
                		<div  class="deviceBox active">
                        	<p><b>Gadget:</b><p>
                            <p><?php if(isset($_COOKIE['gadget'])) echo $_COOKIE['gadget']; ?> - P<?php if(isset($_COOKIE['price'])) echo $_COOKIE['price']; ?></p>
                        </div>
                 
                		<div class="promoBox active">
                        	<p><b>Promo:</b><p>
                            <p><?php if(isset($_COOKIE['promo'])) echo $_COOKIE['promo']; ?></p>
                        </div>
                        
                        <div class="commitmentBox active">
                       	    <p><b>Registration Period </br> and Savings:</b><p>
                            <p><?php if(isset($_COOKIE['commitmentBox'])) echo $_COOKIE['commitmentBox']; ?></p>
                        </div>
                        
                        <div class="prepaidBox active">
                        	<p><b>Mobile Number:</b><p>
                            <p><?php if(isset($_COOKIE['mobtel'])) echo $_COOKIE['mobtel']; ?></p>
                        </div>
                        
                        <div class="profileBox">
                        	<p><b>Profile:</b><p>
                            <p class="pnone">None</p>
							<p style="display:none" id="pname"><span id="name"></span></p>
                           	<p style="display:none" id="pemail">Email Address:<br><span id="email"></span></p>
                           	<p style="display:none" id="pdob">Date of Birth:<br><span id="dob"></span></p>
                           	<p style="display:none" id="padd">Home Address:<br><span id="add"></span>
                        </div>
                        
                        <div class="storeBox">
                       		<p><b>Globe Store Branch:</b><p>
                            <p id="globestore">None</p>
                        </div>    
            </div>
            
            
            <div id="userProf" class="floatLeft boxRight ">
            
            	<div  class="marg20Left">
                	 <p class="header30 marg20" id="top">User profile</p>
                    
                    <p class="text16 floatLeft marg0">Please provide the following:	</p>
                    <p class="floatRight text16 marg0 redText">* Required fields</p>
                    
                    
                    <div class="clear"></div>
                    <?php if(isset($_COOKIE['mode'])): ?>
					 <?php if($_COOKIE['mode']=="edit"): ?>
				      <form id="userinfo" class="marg40" method="post" action="<?php echo base_url('index.php/summary'); ?>">
					 <?php else: ?>
					  <form id="userinfo" class="marg40" method="post" action="<?php echo base_url('index.php/globestore'); ?>">
					 <?php endif;?>
					<?php else: ?>
					 <form id="userinfo" class="marg40" method="post" action="<?php echo base_url('index.php/globestore'); ?>">
					<?php endif;?>
					 <?php if(!empty($userinfo)): ?>	
                     <?php foreach($userinfo as $user){ ?> 
                        <div class="floatLeft width215 marg10Right">
                        <label class="text14">First name<span class="redText">*</span></label>
                        <input type="text" id="Fname" name="Fname" class="inputText width185 marg10Top" maxlength="30" value="<?php echo $user["fName"]; ?>"/>
                        </div>
                        <div class="floatLeft width215 marg10Right">
                        <label class="text14">Middle name <span class="redText">*</span></label>
                        <input type="text" id="Mname" name="Mname" class="inputText width185 marg10Top" maxlength="30" value="<?php echo $user["mName"]; ?>"/>
                        </div>
                        <div class="floatLeft width215">
                        <label class="text14">Last name <span class="redText">*</span></label>
                        <input type="text" id="Lname" name="Lname" class="inputText width185 marg10Top" maxlength="30" value="<?php echo $user["lName"]; ?>"/>
                        </div>
                        
                        <span class="clear"></span>
                        
                        <div class="width215 marg10Top">
							<label class="text14">Nickname (optional)</label>
							<input type="text" id="Nname" name="Nname" class="inputText width185 marg10Top" maxlength="16" value="<?php echo $user["nName"]; ?>"/>
                        </div>
 
                        <div class="width350 marg10Top">
							<label class="text14">Email address<span class="redText">*</span></label>
							<input type="text" id="Eadd" name="Eadd" class="inputText width300 marg10Top" maxlength="50" value="<?php echo $user["email"]; ?>"/>
							<span id="email-error" style="display:none;color:red;font-size:13px;position:absolute;margin-left:340px;margin-top:-30px;">Invalid email format<span>
                        </div>
          
                        <div class="width350 marg10Top">
							<label class="text14">Other contact number (optional)</label>
							<input type="text" id="Othercont" name="Othercont" class="inputText width185 marg10Top" maxlength="20" value="<?php echo $user["otherCont"]; ?>"/>
                        </div>
                        
                         <div class="width215 marg10Top posRel calendarBut">
							<label class="text14">Date of birth<span class="redText">*</span></label>
							<input type="text" id="datepicker" name="birthday" class="inputText width185 marg10Top" value="<?php echo $user["birthdate"]; ?>" disabled/>
                        </div>
                        
                        
                        <div class="width100p marg10Top">
							<label class="text14"><span>Home address</span><br>
							<span>House/ Room/ Floor no./ Building name and Street name<span class="redText">*</span></span></label>
							<input type="text" id="Address" name="Address" class="inputText width100p marg10Top" maxlength="70" value="<?php echo $user["street"]; ?>"/>
                        </div>

                         <div class="floatLeft width320 marg20Right marg10Top">
							<label class="text14">Province<span class="redText">*</span></label>
							<select type="text" id="Province" name="Province" class="width320 marg10Top" maxlength="10" value="<?php echo $user["province"]; ?>"></select>
                        </div>
						
                        <div class="floatLeft width320 marg10Top">
							<label class="text14">City/ Town<span class="redText">*</span></label>
							<select type="text" id="City" name="City" class="width320 marg10Top disable" maxlength="10" value="<?php echo $user["town"]; ?>"></select>
                        </div>
                        
                        <span class="clear"></span>
                        
                        <div class="floatLeft width320 marg20Right marg10Top">
							<label class="text14">Area/ Barangay<span id="areabrgy" class="redText">*</span></label>
							<select type="text" id="Barangay" name="Barangay" class="width320 marg10Top disable" maxlength="10" value="<?php echo $user["area"]; ?>"></select>
                        </div>
						
                        <div class="floatLeft width320 marg10Top">
							<label class="text14">Postal code<span class="redText">*</span></label>
							<select type="text" id="Pcode" name="Pcode" class="width320 marg10Top disable" maxlength="10" value="<?php echo $user["postalCode"]; ?>"></select>
                        </div>

                         <span class="clear"></span>
                        <a href="#." id="btn_next" class="buttonBlue floatRight marg20Top" style="padding: 0px 20px;"><span id="btn_next2">Next</span></a>	
                     <?php   } ?>
					 
					 <?php else: ?>
					 
                        <div class="floatLeft width215 marg10Right">
                        <label class="text14">First name <span class="redText">*</span></label>
                        <input type="text" id="Fname" name="Fname" class="inputText width185 marg10Top" maxlength="30"/>
                        </div>
                        <div class="floatLeft width215 marg10Right">
                        <label class="text14">Middle name <span class="redText">*</span></label>
                        <input type="text" id="Mname" name="Mname" class="inputText width185 marg10Top" maxlength="30"/>
                        </div>
                        <div class="floatLeft width215">
                        <label class="text14">Last name <span class="redText">*</span></label>
                        <input type="text" id="Lname" name="Lname" class="inputText width185 marg10Top" maxlength="30"/>
                        </div>
                        
                        <span class="clear"></span>
                        
                        <div class="width215 marg10Top">
                        <label class="text14">Nickname (optional)</label>
                        <input type="text" id="Nname" name="Nname" class="inputText width185 marg10Top" maxlength="16"/>
                        </div>
 
                        <div class="width350 marg10Top">
                        <label class="text14">Email address<span class="redText">*</span></label>
                        <input type="text" id="Eadd" name="Eadd" class="inputText width300 marg10Top" maxlength="50"/>
						<span id="email-error" style="display:none;color:red;font-size:13px;position:absolute;margin-left:340px;margin-top:-30px;">Invalid email format<span>
                        </div>
          
                        <div class="width350 marg10Top">
                        <label class="text14">Other contact number (optional)</label>
                        <input type="text" id="Othercont" name="Othercont" class="inputText width185 marg10Top" maxlength="20"/>
                        </div>
                        
                         <div class="width215 marg10Top posRel calendarBut">
                        <label class="text14">Date of birth<span class="redText">*</span></label>
                        <input type="text" id="datepicker" name="birthday" class="inputText width185 marg10Top" disabled/>
                        </div>
                        
                        
                        <div class="width100p marg10Top">
                        <label class="text14"><span>Home address</span><br>
						<span>House/ Room/ Floor no./ Building name and Street name<span class="redText">*</span></span></label>
                        <input type="text" id="Address" name="Address" class="inputText width100p marg10Top" maxlength="70"/>
                        </div>

                         <div class="floatLeft width320 marg20Right marg10Top">
                        <label class="text14">Province<span class="redText">*</span></label>
                         <select type="text" id="Province" name="Province" class="width320 marg10Top" maxlength="10"></select>
                        </div>
                         <div class="floatLeft width320 marg10Top">
                        <label class="text14">City/ Town<span class="redText">*</span></label>
                         <select type="text" id="City" name="City" class="width320 marg10Top disable" maxlength="10"></select>
                        </div>
                        
                        <span class="clear"></span>
                        
                        <div class="floatLeft width320 marg20Right marg10Top">
                        <label class="text14">Area/ Barangay<span id="areabrgy" class="redText">*</span></label>
                         <select type="text" id="Barangay" name="Barangay" class="width320 marg10Top disable" maxlength="10"></select>
                        </div>
                        <div class="floatLeft width320 marg10Top">
                        <label class="text14">Postal code<span class="redText">*</span></label>
                        <select type="text" id="Pcode" name="Pcode" class="width320 marg10Top disable" maxlength="10"></select>
                        </div>
                        
                         <span class="clear"></span>
                        <a href="#." id="btn_next" class="buttonBlue floatRight marg20Top" style="padding: 0px 20px;"><span id="btn_next2">Next</span></a>					 
					 
					 
					 <?php endif;?>
					 
                    </form>
                    
                      
                </div>
                
               
            </div><!---BOX RIGHT END---> 
            
            <div class="clear"></div>
            
            </div>
            
            
            
       </div>

<script type="text/javascript">
		jQuery(function(){
			jQuery("#Province, #City, #Barangay, #Pcode").select2({

			});
			jQuery( "#datepicker" ).datepicker({
			  showOn: "button",
			  maxDate: -1,
			  buttonImage: "../skin/images/icons/calendar.png",
			  buttonImageOnly: true,
			  changeMonth: true,
     		  changeYear: true,
			  yearRange:"1900:c"
			});
		})
</script>
	<script type="text/javascript" src="<?php echo base_url('skin/js/postalcode.js'); ?>"></script>